<!-- 自定义 echart 组件 ISP饼状图 -->
<template>
  <div id="ispPie" style="min-height: 300px"></div>
</template>

<script>
    export default {
        props: {
            // 扇形区域名称
            opinion: {
                type: Array,
                default(){
                    return []
                }
            },
            // 图表标题
            titleText: {
                type: String,
                default: ''
            },
            // 提示框标题
            seriesName: {
                type: String,
                default: ''
            },
            // 扇形区域数据
            opinionData: {
                type: Array,
                default(){
                    return []
                }
            },
        },
        data(){
            return {
                //
            }
        },
        mounted(){
            this.drawPie();
             /* this.$nextTick(function() {
                  this.drawPie()
              })*/
        },
        methods: {
            // 绘制饼状图
            drawPie(){
                this.charts = this.$echarts.init(document.getElementById('ispPie'));

                //设置参数
                this.charts.setOption({
                    title: {
                        text: this.titleText, // 标题文本
                        left: 'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{b} <br/> 次数: {c} <br/> 占比: {d}%"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        y: 'center', // 'center' | 'bottom' | {number}
                        data: this.opinion // 图例名称
                    },
                    series : [
                        {
                            name:this.seriesName,  // 提示框标题
                            type: 'pie',
                            radius : '60%',
                            //radius : [0,115],
                            center: ['60%', '50%'],
                            selectedMode: 'single',
                            data:this.opinionData, // 扇形区域数据
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                },
                                normal : {
                                    label : {
                                        show : true   //隐藏标示文字
                                    },
                                    labelLine : {
                                        show : true   //隐藏标示线
                                    }
                                }
                            }
                        }
                    ]
                })
            }
        }
    }
</script>